<template>
  <div class="home" v-loading="isLoading">
    <div class="top">
      <div class="psa">
        <!-- <el-select
          v-model="value县"
          placeholder="请选择一级机构"
          class="search_style"
          @change="Xchange"
          size="small"
        >
          <el-option
            v-for="item in 县"
            :key="item.hospitalId + 'c'"
            :label="item.hospitalName"
            :value="item.hospitalId"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="value乡"
          placeholder="请选择二级机构"
          class="search_style2"
          @change="xchange"
          size="small"
        >
          <el-option
            v-for="item in 乡"
            :key="item.hospitalId + 'a'"
            :label="item.hospitalName"
            :value="item.hospitalId"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="value村"
          placeholder="请选择三级机构"
          class="search_style3"
          @change="xchange1"
          size="small"
        >
          <el-option
            v-for="item in 村"
            :key="item.hospitalId + 'b'"
            :label="item.hospitalName"
            :value="item.hospitalId"
          >
          </el-option>
        </el-select> -->

        <el-row>
          <el-col :span="5" style="margin-right: 15px"
            ><dv-border-box-10 style="width: 100%"
              >一般人 <br />
              {{ data_data.分组数量._一般人 }}</dv-border-box-10
            ></el-col
          >
          <el-col :span="5" style="margin-right: 15px"
            ><dv-border-box-10 style="width: 100%"
              >儿童 <br />
              {{ data_data.分组数量._0到6岁儿童 }}</dv-border-box-10
            ></el-col
          >
          <el-col :span="5" style="margin-right: 15px"
            ><dv-border-box-10 style="width: 100%"
              >孕产妇 <br />
              {{ data_data.分组数量._孕产妇 }}</dv-border-box-10
            ></el-col
          >
          <el-col :span="5" style="margin-right: 15px"
            ><dv-border-box-10 style="width: 100%"
              >老年人 <br />
              {{ data_data.分组数量._65岁及以上老年人 }}</dv-border-box-10
            ></el-col
          >
        </el-row>
      </div>
      <div class="psb">
        <!-- <el-button class="btn_style" type="text" @click="timer(1)"
              >当前年</el-button
            >
            <el-button class="btn_style" type="text" @click="timer(2)"
              >近30天</el-button
            >
            <el-button class="btn_style" type="text" @click="timer(3)"
              >近6个月</el-button
            >
            <el-button class="btn_style" type="text" @click="timer(4)"
              >近12个月</el-button
            >
            <el-button class="btn_style" type="text" @click="timer(5)"
              >近24个月</el-button
            > -->
        <!-- <el-date-picker
          v-model="value1"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          size="mini"
          @change="timer"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker> -->
        <el-row>
          <el-col :span="4"
            ><dv-border-box-10 style="width: 100%"
              >高血压 <br />
              <!-- {{ data_data.疾病数量._2型糖尿病患者 }} -->
              20281
            </dv-border-box-10></el-col
          >
          <el-col :span="4"
            ><dv-border-box-10 style="width: 100%"
              >糖尿病 <br />
              <!-- {{ data_data.疾病数量._2型糖尿病患者 }} -->
              4109
            </dv-border-box-10></el-col
          >
          <el-col :span="4"
            ><dv-border-box-10 style="width: 100%"
              >冠心病 <br />
              <!-- {{ data_data.疾病数量._2型糖尿病患者 }} -->
              1467
            </dv-border-box-10></el-col
          >
          <el-col :span="4"
            ><dv-border-box-10 style="width: 100%"
              >慢阻肺 <br />
              <!-- {{ data_data.疾病数量._2型糖尿病患者 }} -->
              1699
            </dv-border-box-10></el-col
          >
          <el-col :span="4"
            ><dv-border-box-10 style="width: 100%"
              >脑卒中 <br />
              <!-- {{ data_data.疾病数量._2型糖尿病患者 }} -->
              3155
            </dv-border-box-10></el-col
          >
          <el-col :span="4"
            ><dv-border-box-10 style="width: 100%"
              >慢性肾脏病 <br />
              <!-- {{ data_data.疾病数量._2型糖尿病患者 }} -->
              45
            </dv-border-box-10></el-col
          >
        </el-row>
      </div>
      <span style="display: inline-block"
        ><dv-decoration-7 style="height: 30px"
          ><span style="font-size: 22px; display: inline-block; padding: 0 10px"
            >全民健康管理平台</span
          ></dv-decoration-7
        ></span
      >
    </div>
    <el-row style="margin-top: 20px">
      <el-col :span="8" style="padding: 10px">
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">区域统计</p>
            <dv-scroll-board
              :config="config6"
              style="width: 100%; height: 80%"
            />
          </dv-border-box-12>
        </div>

        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <el-row>
              <el-col :span="12">
                <p class="box_title" style="text-align: center">年龄分组</p>
                <qiun-vue-ucharts
                  type="pie"
                  :opts="opts2"
                  :chartData="chartData2"
                  style="margin-top: -20px"
                />
              </el-col>
              <el-col :span="12">
                <p class="box_title" style="text-align: center">性别分组</p>
                <qiun-vue-ucharts
                  type="pie"
                  :opts="opts3"
                  :chartData="chartData3"
                  style="margin-top: -20px"
                />
              </el-col>
            </el-row>
          </dv-border-box-12>
        </div>
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">人员分组</p>
            <qiun-vue-ucharts
              type="column"
              :opts="opts1"
              :chartData="chartData1"
              style="margin-top: -10px"
            />
          </dv-border-box-12>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 10px 0">
        <div class="box2" style="height: calc((100vh + 100px) / 2)">
          <div class="psc">
            <p class="box_title" style="text-align: center; font-weight: 400">
              家庭数量
            </p>
            <h1 class="num_c">{{ data_data.家庭数量 }}</h1>
          </div>
          <div class="psd">
            <p class="box_title" style="text-align: center; font-weight: 400">
              居民数量
            </p>
            <h1 class="num_c">{{ data_data.居民数量 }}</h1>
          </div>
          <qiun-vue-ucharts type="map" :opts="opts5" :chartData="chartData5" />
        </div>
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">建档趋势</p>
            <qiun-vue-ucharts
              type="column"
              :opts="opts7"
              :chartData="chartData7"
              style="margin-top: -10px"
            />
          </dv-border-box-12>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 10px">
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">早发现</p>
            <qiun-vue-ucharts
              type="bar"
              :opts="opts8"
              :chartData="chartData8"
              style="margin-top: -10px"
            />
          </dv-border-box-12>
        </div>
        <!-- <div class="box" style="height: calc((100vh - 130px) / 3 / 2)">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">家庭数量</p>
            <h1 class="num_c">{{ data_data.家庭数量 }}</h1>
          </dv-border-box-12>
        </div>
        <div class="box" style="height: calc((100vh - 130px) / 3 / 2)">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">居民数量</p>
            <h1 class="num_c">{{ data_data.居民数量 }}</h1>
          </dv-border-box-12>
        </div> -->
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">早干预</p>
            <el-row style="margin-top: 40px">
              <el-col :span="12">
                <p
                  class="box_title"
                  style="text-align: center; font-weight: 400"
                >
                  宣教人次
                </p>
                <h1 class="num_c2">{{ data_data.早干预.宣教人次 }}</h1>
              </el-col>
              <el-col :span="12">
                <p
                  class="box_title"
                  style="text-align: center; font-weight: 400"
                >
                  随访人次
                </p>
                <h1 class="num_c2">{{ data_data.早干预.体检人次 }}</h1>
              </el-col>
            </el-row>
          </dv-border-box-12>
        </div>
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">早治疗</p>
            <el-row style="margin-top: 40px">
              <el-col :span="12">
                <p
                  class="box_title"
                  style="text-align: center; font-weight: 400"
                >
                  门诊人次
                </p>
                <h1 class="num_c3">{{ data_data.早治疗.门诊人次 }}</h1>
              </el-col>
              <el-col :span="12">
                <p
                  class="box_title"
                  style="text-align: center; font-weight: 400"
                >
                  住院人次
                </p>
                <h1 class="num_c3">{{ data_data.早治疗.住院人次 }}</h1>
              </el-col>
            </el-row>
          </dv-border-box-12>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
    
    <script>
import qiunVueUcharts from "@qiun/vue-ucharts";
import mapData from "../common/staticData.json";
export default {
  components: {
    qiunVueUcharts,
  },
  data() {
    return {
      县: [],
      乡: [],
      村: [],
      value县: "",
      value乡: "",
      value村: "",
      机构: "3168",
      pickerOptions: {
        shortcuts: [
          {
            text: "当天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",

      isLoading: false,
      isData: {},
      mapData,
      data_data: { 疾病数量: {}, 分组数量: {}, 早治疗: {}, 早干预: {} },
      chartData1: {},
      opts1: {
        color: ["#1890FF", "#91CB74", "#ea7ccc"],
        fontColor: "#fff",
        fontSize: 10,
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          fontColor: "#fff",
          rotateLabel: true,
          rotateAngle: 20,
        },
        yAxis: {
          data: [
            {
              min: 0,
            },
          ],
          fontColor: "#fff",
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            linearType: "custom",
            seriesGap: 5,
            barBorderCircle: true,
            customColor: ["#FA7D8D", "#EB88E2"],
          },
        },
      },
      chartData2: {},
      opts2: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        fontColor: "#fff",
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            linearType: "custom",
          },
        },
      },
      chartData3: {},
      opts3: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        fontColor: "#fff",
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            linearType: "custom",
          },
        },
      },
      config4: [],
      chartData5: {},
      opts5: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        fontColor: "#fff",
        padding: [0, 0, 0, 0],
        dataLabel: true,
        enableScroll: false,
        extra: {
          map: {
            border: true,
            borderWidth: 1,
            borderColor: "#666666",
            fillOpacity: 0.6,
            activeBorderColor: "#F04864",
            activeFillColor: "#FACC14",
            activeFillOpacity: 1,
          },
        },
      },
      config6: [],
      chartData7: {},
      opts7: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        fontColor: "#fff",
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          fontColor: "#fff",
          rotateLabel: true,
          rotateAngle: 20,
        },
        yAxis: {
          data: [
            {
              min: 0,
              max: 30,
            },
          ],
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
          },
        },
      },
      chartData8: {},
      opts8: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        fontColor: "#fff",
        padding: [15, 30, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          boundaryGap: "justify",
          disableGrid: false,
          min: 0,
          axisLine: false,
          max: 110000,
          fontColor: "#fff",
        },
        yAxis: {},
        extra: {
          bar: {
            type: "group",
            width: 30,
            meterBorde: 1,
            meterFillColor: "#FFFFFF",
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            linearType: "custom",
            barBorderCircle: true,
            seriesGap: 2,
            categoryGap: 2,
          },
        },
      },
    };
  },
  created() {
    // this.timer(5);
  },
  mounted() {
    // this.get县();
    this.getData();
  },
  methods: {
    getData() {
      this.$post("/Family/Statistics").then((res) => {
        this.data_data = res.Data;
        this.getServerData1();
        this.getServerData2();
        this.getServerData3();
        this.getServerData4();
        this.getServerData5();
        this.getServerData6();
        this.getServerData7();
        this.getServerData8();
      });
    },
    get县() {
      var body = {
        pId: "",
      };
      this.$post(baseUrl.hrIp + "/rpt/person/getRegion", body).then((res) => {
        this.县 = res.data;
        // localStorage.setItem("token", this.$route.query.Token);
      });
    },
    Xchange(val) {
      this.乡 = [];
      this.村 = [];
      this.value乡 = "";
      this.value村 = "";
      this.机构 = [];
      // console.log(val);
      var body = {
        pId: val,
      };
      this.$post(baseUrl.hrIp + "/rpt/person/getRegion", body).then((res) => {
        this.乡 = res.data;
        this.机构 = val;
        // for (var i in res) {
        //   this.机构.push(res[i].hospitalId);
        // }
        this.init(val);
      });
    },
    xchange(val) {
      this.村 = [];
      this.value村 = "";
      this.机构 = [];
      // console.log(val);
      var body = {
        pId: val,
      };
      this.$post(baseUrl.hrIp + "/rpt/person/getRegion", body).then((res) => {
        this.村 = res.data;
        this.机构 = val;
        // for (var i in res) {
        //   this.机构.push(res[i].hospitalId);
        // }
        this.init(val);
      });
    },
    xchange1(val) {
      this.机构 = [];
      this.机构 = val;
      this.init(val);
    },
    timer(flag) {
      var Timm = {
        a: this.value1[0],
        b: this.value1[1],
      };
      if (flag == 5) {
        Timm = {
          a: "",
          b: "",
        };
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        Timm.a = start;
        Timm.b = end;
        this.value1 = [start, end];
      }

      this.时间 = Timm;
      this.init();
    },
    init(val) {
      var body = {
        startTime: this.时间.a,
        endTime: this.时间.b,
        orgId: this.机构,
      };
      this.isLoading = true;
      this.$post("/Screen/Xcgl", body).then((res) => {
        this.isData = res.Data;
        this.isLoading = false;
      });
    },
    getServerData1() {
      let res = {
        categories: [
          "儿童",
          "糖尿病",
          "老年人",
          "一般人",
          "精神障碍",
          "五保户",
          "低保户",
          "孕产妇",
          "贫困人员",
          "居民",
          "残疾人",
          "肺结核",
          "计划生育特殊家庭",
          "高血压",
        ],
        series: [
          {
            name: "人数",
            data: [
              this.data_data.分组数量._0到6岁儿童,
              this.data_data.分组数量._2型糖尿病患者,
              this.data_data.分组数量._65岁及以上老年人,
              this.data_data.分组数量._一般人,
              this.data_data.分组数量._严重精神障碍患者,
              this.data_data.分组数量._五保户,
              this.data_data.分组数量._城乡低保户,
              this.data_data.分组数量._孕产妇,
              this.data_data.分组数量._建档立卡贫困人员,
              this.data_data.分组数量._普通居民,
              this.data_data.分组数量._残疾人,
              this.data_data.分组数量._肺结核患者,
              this.data_data.分组数量._计划生育特殊家庭成员,
              this.data_data.分组数量._高血压患者,
            ],
          },
        ],
      };

      this.chartData1 = JSON.parse(JSON.stringify(res));
    },
    getServerData2() {
      let res = {
        series: [
          {
            data: [
              { name: "18岁以下", value: this.data_data.年龄分组._18岁以下 },
              { name: "18到45岁", value: this.data_data.年龄分组._18到45岁 },
              { name: "45到60岁", value: this.data_data.年龄分组._45到60岁 },
              { name: "60岁以上", value: this.data_data.年龄分组._60岁以上 },
            ],
          },
        ],
      };
      this.chartData2 = JSON.parse(JSON.stringify(res));
    },
    getServerData3() {
      var data = [];
      for (var i in this.data_data.性别分组) {
        var item = {
          name: this.setStr(this.data_data.性别分组[i].性别),
          value: this.data_data.性别分组[i].数量,
        };
        data.push(item);
      }
      let res = {
        series: [
          {
            data: data,
          },
        ],
      };
      this.chartData3 = JSON.parse(JSON.stringify(res));
    },
    setStr(val) {
      var str = "";
      if (val == null) {
        str = "未定义";
      }
      if (val == 1) {
        str = "男";
      }
      if (val == 2) {
        str = "女";
      }

      return str;
    },
    getServerData4() {
      var data = [];
      for (var i in this.data_data.成员数量分组) {
        data.push([
          this.data_data.成员数量分组[i].家庭数量,
          this.data_data.成员数量分组[i].成员数量,
        ]);
      }
      var data = {
        header: ["家庭数量", "成员数量"],
        data: data,
      };
      this.config4 = data;
    },
    getServerData5() {
      let res = { series: this.mapData.features };
      this.chartData5 = JSON.parse(JSON.stringify(res));
    },
    getServerData6() {
      var data = [];
      for (var i in this.data_data.区域统计) {
        data.push([
          this.data_data.区域统计[i].AreaName,
          this.data_data.区域统计[i].Data.count,
        ]);
      }
      var data = {
        header: ["地区名称", "家庭数量"],
        data: data,
        oddRowBGC: "rgb(1,15,80)",
        evenRowBGC: "rgb(2,80,200)",
      };
      this.config6 = data;
    },
    getServerData7() {
      var categories = [];
      var data = [];
      for (var i in this.data_data.建档趋势) {
        categories.push(this.data_data.建档趋势[i].Name);
        data.push(this.setNum(this.data_data.建档趋势[i].Count));
      }
      let res = {
        categories: categories,
        series: [
          {
            name: "数量(万)",
            data: data,
          },
        ],
      };
      this.chartData7 = JSON.parse(JSON.stringify(res));
    },
    getServerData8() {
      var categories = [];
      var data = [];
      var 疾病数量 = [];
      for (var i in this.data_data.早发现) {
        var item = {
          name: this.data_data.早发现[i].diag_name,
          num: this.data_data.早发现[i].count,
        };
        疾病数量.push(item);
      }
      for (var i in 疾病数量) {
        categories.push(疾病数量[i].name);
        data.push(疾病数量[i].num);
      }
      let res = {
        categories: categories,
        series: [
          {
            name: "人次",
            data: data,
          },
        ],
      };
      this.chartData8 = JSON.parse(JSON.stringify(res));
    },
    setNum(val) {
      var str = (val / 10000).toFixed(2);
      return str;
    },
  },
  filters: {},
};
</script>
    
    <style scoped lang="scss">
.home {
  width: 100%;
  height: calc(100vh - 46px);
  background-image: url("../../assets/image/home_bj.png");
  background-size: cover;
  // background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  padding: 15px;
  overflow: hidden;
  .top {
    text-align: center;
    color: #fff;
    .psa {
      z-index: 999;
      position: absolute;
      width: 40%;
      top: 20px;
    }
    .psb {
      z-index: 999;
      position: absolute;
      right: 30px;
      width: 40%;
      top: 20px;
    }
    .search_style {
      width: 150px;
      position: absolute;
      left: 0;
    }
    .search_style2 {
      width: 150px;
      position: absolute;
      left: 160px;
    }
    .search_style3 {
      width: 150px;
      position: absolute;
      left: 320px;
    }
  }
  .box {
    background-color: rgba(0, 0, 0, 0.1);
    height: calc((100vh - 180px) / 3);
    margin-bottom: 15px;
    border-radius: 15px;
    .box_title {
      text-align: left;
      color: rgb(152, 253, 250);
      padding: 5px 10px;
      padding-bottom: 0;
      font-size: 20px;
      font-weight: 700;
    }
  }
  .box2 {
    // height: calc((100vh - 190px) / 3);
    margin-bottom: 15px;
    border-radius: 15px;
    .box_title {
      text-align: center;
      color: rgb(152, 253, 250);
      padding: 5px 0;
      padding-bottom: 0;
      margin-bottom: 10px;
      font-size: 20px;
      font-weight: 700;
    }
  }
  .charts-box {
    width: 100%;
    height: calc((100vh - 300px) / 3);
    padding-top: 8px;
  }
  .num_c {
    text-align: center;
    // line-height: 50px;
    font-weight: 900;
    font-size: 50px;
    margin-top: -5px;
    background: linear-gradient(to top, yellow, 40%, #fff); /* 定义渐变背景 */
    -webkit-background-clip: text; /* 兼容 WebKit 内核浏览器 */
    background-clip: text;
    -webkit-text-fill-color: transparent; /* 兼容 WebKit 内核浏览器 */
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
  }
  .num_c2 {
    text-align: center;
    // line-height: 50px;
    font-weight: 900;
    font-size: 50px;
    margin-top: -5px;
    background: linear-gradient(to top, orange, 40%, #fff); /* 定义渐变背景 */
    -webkit-background-clip: text; /* 兼容 WebKit 内核浏览器 */
    background-clip: text;
    -webkit-text-fill-color: transparent; /* 兼容 WebKit 内核浏览器 */
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
  }
  .num_c3 {
    text-align: center;
    // line-height: 50px;
    font-weight: 900;
    font-size: 50px;
    margin-top: -5px;
    background: linear-gradient(to top, green, 40%, #fff); /* 定义渐变背景 */
    -webkit-background-clip: text; /* 兼容 WebKit 内核浏览器 */
    background-clip: text;
    -webkit-text-fill-color: transparent; /* 兼容 WebKit 内核浏览器 */
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
  }
  .psc {
    z-index: 999;
    position: absolute;
    width: 40%;
    top: 20px;
    left: 20%;
  }
  .psd {
    z-index: 999;
    position: absolute;
    width: 40%;
    top: 20px;
    right: 20%;
  }
}

//
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 10px;
}
::v-deep .el-input__inner {
  background-color: #00083e;
  color: #fff;
  border: 1px solid #31cae4;
}

.el-select-dropdown__item {
  line-height: 35px;
  color: #fff;
  background-color: #00083e;
}
::v-deep .el-select-dropdown {
  background-color: transparent;
  border: 1px solid blue;
}
::v-deep .el-select-dropdown__list {
  padding: 0 !important;
}
::v-deep .el-popper[x-placement^="bottom"] {
  margin-top: 0px;
}
::v-deep .el-popper .popper__arrow,
::v-deep .el-popper .popper__arrow::after {
  display: none;
}
.el-select-dropdown__item:hover {
  background-color: rgba(0, 225, 219, 0.690196078431373);
}
::v-deep .el-range-editor--mini .el-range-input {
  background-color: #00083e;
  color: fff;
}
::v-deep .el-range-editor--mini .el-range-separator {
  color: #fff;
}
</style>
  
  